<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">hello,{{name}}</div>

        <script>
            // el的两种写法
            // 第一种写法
            // new Vue({
            //     el:'#root',
            //     data:{
            //         name:'jack'
            //     }
            // })

            // 第二种写法
            // const vm = new Vue({
            //     data: {
            //         name: "jack2",
            //     },
            // });
            // vm.$mount("#root");

            
            //data的两种写法
            // 第一种写法
            // new Vue({
            //     el: "#root",
            //     data: {
            //         name: "jack",
            //     },
            // });

            // // 第二种写法
            new Vue({
                el: "#root",
                data() {
                    return {
                        name: "jack2",
                    };
                },
            });
        </script>
    </body>
</html>
